<template>
	<div class="allcontainer" v-loading="loading">
		<div class="h2">我发起的活动</div>
		<div class="bg-white">
			<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch"
				style="background: none;">
				<a-row>
					<a-col :span="8" class="sousuo">
						<a-form-item label="编号">
							<a-input class="field-right" placeholder="请输入编号搜索" v-decorator="[`key`]" />
						</a-form-item>
					</a-col>
					<a-col :span="16" style="top: 2px;">
						<a-button type="primary" html-type="submit" style="margin-left: 10px;">搜索</a-button>
						<a-button @click="handleReset">重置</a-button>
						<a-button type="primary" @click="addActivity(1, 1)">发起活动</a-button>
					</a-col>
				</a-row>
			</a-form>
			<a-tabs default-active-key="0" @change="callback">
				<a-tab-pane key="0" tab="全部"></a-tab-pane>
				<a-tab-pane key="1" tab="进行中"></a-tab-pane>
				<a-tab-pane key="2" tab="待完结" force-render></a-tab-pane>
				<a-tab-pane key="3" tab="已完结"></a-tab-pane>
			</a-tabs>
			<div class="table">
				<div class="tipremark">备注：当活动时间结束后会显示”申请完结“按钮，方可进行完结操作！</div>
				<el-table stripe ref="singleTable" :data="data" highlight-current-row style="width: 100%">
					<el-table-column type="index" label="序号" width="60" fixed="left" align="center"></el-table-column>
					<el-table-column prop="No" label="编号" width="120" fixed="left" align="center"></el-table-column>
					<el-table-column prop="Title" label="学生组织/班级/活动名称" min-width="150" fixed="left"
						show-overflow-tooltip>
						<template slot-scope="scope">
							<div>{{ scope.row.ClassName ? scope.row.ClassName : scope.row.ClubName }}</div>
							<div style="color:orange;">{{ scope.row.Title || scope.row.TypeItemName }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="ChargeUserNo" label="主席/学号" min-width="140" align="center">
						<template slot-scope="scope">
							<div>{{ scope.row.ChargeUserName | testname }}</div>
							<div>{{ scope.row.ChargeUserNo | testno }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="ChargeUserNo" label="等级/活动类型" min-width="140" align="center">
						<template slot-scope="scope">
							<div>{{ scope.row.LevelName }}</div>
							<div>{{ scope.row.TypeName }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="Reason" label="状态" min-width="120" align="center">
						<template slot-scope="scope">
							<span>
								<a-tag :color="colorFun(scope.row.State)">
									{{ ActivityStateList.filter(data => data.Key == scope.row.State).length > 0 ? ActivityStateList.filter(data => data.Key == scope.row.State)[0].Value : '暂无' }}
								</a-tag>
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="AddTime" label="活动时间" min-width="160" align="center">
						<template slot-scope="scope">
							<div>始：{{ scope.row.StartTime }}</div>
							<div>终：{{ scope.row.EndTime }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="IsEnable" label="操作" min-width="198">
						<template slot-scope="scope">
							<div class="user-btn user-btn-auto">
								<span class="member" @click="detailActivity(scope.row)">详情</span>
								<span class="signin" @click="UserActivitySign(scope.row)">签到</span>
								<a-dropdown v-if="scope.row.State == 1 || scope.row.State == 3 ||scope.row.State == 7||scope.row.IsNeedActivityJob">
									<a style="color: #4169E0;padding-left: 10px;" class="ant-dropdown-link"
										@click.prevent>
										更多<i
											style="font-size: 25px;position: relative;top:12px;left:5px !important;font-style: normal;">ˇ</i>
									</a>
									<template #overlay>
										<a-menu>
											<a-menu-item v-if="scope.row.IsNeedActivityJob" class="modify"
												@click="UserActivityJob(scope.row, 'UserActivityJob')">
												作业
											</a-menu-item>
											<a-menu-item v-if="scope.row.State == 1" class="modify"
												@click="updateActivity(scope.row, 3)">
												修改
											</a-menu-item>
											<a-menu-item v-if="scope.row.State == 1" class="examine"
												@click="sumbitapply(scope.row, 'manage')">
												提交审批
											</a-menu-item>
											<a-menu-item
												v-if="(scope.row.State == 3 || scope.row.State == 7) && Date.parse(scope.row.EndTime.replace(/-/g, '/')) < Date.parse(new Date())"
												@click="sumbitapplyend(scope.row, 'manage')">
												申请完结
											</a-menu-item>
											<a-menu-item v-if="scope.row.State == 1" @click="applydelete(scope.row)">
												删除
											</a-menu-item>
											<a-menu-item
												v-if="(scope.row.State != 1 && scope.row.State != 2) || !scope.row.ClubID"
												@click="activitymembermanage(scope.row)">
												成员
											</a-menu-item>
											<a-menu-item
												v-if="scope.row.State != 1 && scope.row.State != 2 && scope.row.ClubID && scope.row.IsNeedApply"
												@click="ActivityApplyList(scope.row)">
												申请人
											</a-menu-item>
											<a-menu-item
												v-if="scope.row.State != 1 && scope.row.State != 2 &&scope.row.IsHasPrize && scope.row.ClubID"
												@click="UserPrizeList(scope.row)">
												获奖信息
											</a-menu-item>
											<a-menu-item @click="AddFile(scope.row)"
												v-if="scope.row.State != 1 && scope.row.State != 2">
												附件
											</a-menu-item>
										</a-menu>
									</template>
								</a-dropdown>
							</div>

						</template>
					</el-table-column>
				</el-table>

				<!-- <a-tabs default-active-key="1" @change="callback">
				<a-tab-pane key="1" tab="我发起的"></a-tab-pane>
				<a-tab-pane key="2" tab="我管理的" force-render>
					<el-table stripe ref="singleTable" :data="admindata"highlight-current-row style="width: 100%">
						<el-table-column prop="Title" label="学生组织/班级/活动名称" min-width="150" fixed="left" show-overflow-tooltip>
							<template slot-scope="scope">
								<div>{{ scope.row.ClassName?'班级：'+scope.row.ClassName:'学生组织：'+scope.row.ClubName }}</div>
								<div style="color:orange;">{{ scope.row.Title }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="ChargeUserNo" label="主席/学号" min-width="140">
							<template slot-scope="scope">
								<div>{{ scope.row.ChargeUserName | testname }}</div>
								<div>{{ scope.row.ChargeUserNo | testno }}</div>
								</template>
						</el-table-column>
						<el-table-column prop="ChargeUserNo" label="等级/活动类型" min-width="140">
							<template slot-scope="scope">
								<div>{{ scope.row.LevelName }}</div>
								<div>{{ scope.row.TypeName }}</div>
								</template>
						</el-table-column>
						<el-table-column prop="Reason" label="状态" min-width="100">
							<template slot-scope="scope">
								<span>
									<a-tag color="orange">{{ ActivityStateList.filter(data => data.Key== scope.row.State).length>0?ActivityStateList.filter(data => data.Key== scope.row.State)[0].Value:'暂无' }}</a-tag>
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="AddTime" label="活动时间" min-width="140">
							<template slot-scope="scope">
								<div>始：{{scope.row.StartTime}}</div>
								<div>终：{{scope.row.EndTime}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="IsEnable" label="操作">
							<template slot-scope="scope">
								<i title="查看" class="iconfont icon-chakan" style="color: #1890FF;" @click="detailActivity(scope.row)"></i>
								<i title="修改" class="iconfont icon-editor1" v-if="scope.row.State == 1" style="color: #1890FF;" @click="updateActivity(scope.row,3)"></i>
								<i title="提交审批" class="iconfont icon-tijiao" v-if="scope.row.State == 1" style="color: #1890FF;" @click="sumbitapply(scope.row,'manage')"></i>
								<i title="申请完结" class="iconfont icon-wanjie" v-if="(scope.row.State == 3||scope.row.State == 7)&&Date.parse(scope.row.EndTime.replace(/-/g,'/')) <Date.parse(new Date())" style="color: #1890FF;" @click="sumbitapplyend(scope.row,'manage')"></i>
								<i title="删除" class="iconfont icon-delete1" v-if="scope.row.State == 1" style="color: red;" @click="applydelete(scope.row)"></i>
							</template>
						</el-table-column>
					</el-table>
				</a-tab-pane>
				<a-tab-pane key="3" tab="我参与的">
					<el-table stripe ref="singleTable" :data="joindata" highlight-current-row style="width: 100%">
						<el-table-column prop="Title" label="学生组织/班级/活动名称" min-width="150" fixed="left" show-overflow-tooltip>
							<template slot-scope="scope">
								<div>{{ scope.row.ClassName?'班级：'+scope.row.ClassName:'学生组织：'+scope.row.ClubName }}</div>
								<div style="color:orange;">{{ scope.row.Title }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="ChargeUserNo" label="主席/学号" min-width="140">
							<template slot-scope="scope">
								<div>{{ scope.row.ChargeUserName | testname }}</div>
								<div>{{ scope.row.ChargeUserNo | testno }}</div>
								</template>
						</el-table-column>
						<el-table-column prop="ChargeUserNo" label="等级/活动类型" min-width="140">
							<template slot-scope="scope">
								<div>{{ scope.row.LevelName }}</div>
								<div>{{ scope.row.TypeName }}</div>
								</template>
						</el-table-column>
						<el-table-column prop="Reason" label="状态" min-width="100">
							<template slot-scope="scope">
								<span>
									<a-tag color="orange">{{ ActivityStateList.filter(data => data.Key== scope.row.State).length>0?ActivityStateList.filter(data => data.Key== scope.row.State)[0].Value:'暂无' }}</a-tag>
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="AddTime" label="活动时间" min-width="140">
							<template slot-scope="scope">
								<div>始：{{scope.row.StartTime}}</div>
								<div>终：{{scope.row.EndTime}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="IsEnable" label="操作">
							<template slot-scope="scope">
								<i title="查看" class="iconfont icon-chakan" style="color: #1890FF;" @click="detailActivity(scope.row)"></i>
								<i title="修改" class="iconfont icon-editor1" v-if="scope.row.State == 1" style="color: #1890FF;" @click="updateActivity(scope.row,3)"></i>
								<i title="提交审批" class="iconfont icon-tijiao" v-if="scope.row.State == 1" style="color: #1890FF;" @click="sumbitapply(scope.row,'manage')"></i>
								<i title="删除" class="iconfont icon-delete1" v-if="scope.row.State == 1" style="color: red;" @click="applydelete(scope.row)"></i>
							</template>
						</el-table-column>
					</el-table>
				</a-tab-pane>
			</a-tabs> -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
					:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="pagination.total"></el-pagination>
			</div>
		</div>
		<addActivity v-if="showModal" :ClubID="ClubID" :text="text1" @closeFun="closeFun"></addActivity>
		<detailActivity v-if="detailshowModal" :ClubID="ClubID" :text="text1" @closeFun="closeFun"></detailActivity>
		<EndActivityApply v-if="EndActivityApplyIf" :text="text2" @closeFun="closeFun"></EndActivityApply>
	</div>
</template>

<script>
	import addActivity from './addActivity.vue';
	import detailActivity from './detailActivity.vue';
	import EndActivityApply from './activity/EndActivityApply.vue';
	import Func from '@/utils/func';
	import {
		GetActivityPageList,
		GetApplyActivityPageList,
		GetManageActivityPageList,
		GetJoinActivityPageList,
		UserSubmitActivity,
		GetFormList,
		UserdeleteActivity,
		GetActivityStateList,
		UserDoSubmitEndActivity,
		UserGetClubDetail
	} from '@/api/follow';
	import applyJoin from '@/components/Apply';
	import Cache from '@/utils/cache';
	const data = [];
	const admindata = [];
	const joindata = [];
	export default {
		components: {
			addActivity,
			detailActivity,
			EndActivityApply
		},
		// filters: {
		// 	testno(value) {
		// 		let str = value.toString()
		// 		return `${str.substring(0,2)}**${str.substring(str.length-2)}`
		// 	},
		// 	testname(value) {
		// 		let str = value.toString()
		// 		if (str.length < 3) {
		// 			return `${str.substring(0,1)}**`
		// 		} else {
		// 			return `${str.substring(0,1)}*${str.substring(str.length-1)}`
		// 		}
		// 	}
		// },
		props: {
			text: Object
			// type: Number
		},
		data() {
			return {
				data,
				admindata,
				joindata,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				TypeList: [{
						ID: 'null',
						Name: '待审核'
					},
					{
						ID: 'true',
						Name: '审核通过'
					},
					{
						ID: 'false',
						Name: '审核未通过'
					}
				],
				addIf: false,
				text1: {},
				visible: false,
				confirmLoading: false,
				itemId: '',
				departmentList: [],
				worklist: [],
				loading: false,
				values: {},
				pages: {
					pageIndex: 1,
					pageSize: 20
				},
				tableHeight: parseFloat(window.innerHeight - 160),
				TypeIDList: [],
				DepartCodeList: [],
				ProjectIDList: [],
				ishaveid: true,
				selectList: {},
				showModal: false,
				updateshowModal: false,
				detailshowModal: false,
				ClubID: this.$route.query.ID,
				State: this.$route.query.State,
				ActivityStateList: [],
				ChairmanNo: '',
				thisChairmanNo: Cache.get('myInfo').UserNo,
				showbutton: false,
				EndActivityApplyIf: false,
				text2: {},
				requestUrl: this.global.requestUrl,
				progress: 0
			};
		},
		computed: {},
		created() {
			this.getList();
			this.ActivityState();
			this.State = this.$route.query.State;
		},
		mounted() {},
		methods: {
			colorFun(key) {
				return Func.clolorType(key)
			},
			callback(key) {
				this.pagination.currentPage = 1;
				this.progress = key;
				this.getList();
			},
			async ActivityState() {
				let res = await GetActivityStateList();
				this.ActivityStateList = res.data.data;
			},
			applydelete(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定删除该申请吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await UserdeleteActivity(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			sumbitapplyend(text) {
				// this.text2 = {...text,time:new Date()}
				// this.EndActivityApplyIf = true
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定提交该发放（完结审批）吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await UserDoSubmitEndActivity(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			sumbitapply(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定提交活动审批吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.ID = text.ID;
						let res = await UserSubmitActivity(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			handleChange(val) {
				this.currentRow = val;
				if (val.ID) {
					this.ishaveid = false;
					this.selectList = val;
				} else {
					this.ishaveid = true;
				}
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList(key) {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}

				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				data.clubID = this.$route.query.ID;
				data.progress = this.progress;
				let res = await GetApplyActivityPageList(data);
				// let res1 = await GetManageActivityPageList(data);
				// let res2 = await GetJoinActivityPageList(data);
				this.loading = false;
				this.data = res.data.data;
				// this.admindata = res1.data.data;
				// this.joindata = res2.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
			},
			addActivity(t, type) {
				this.$router.push({
					name: 'addActivity'
				});
				// this.type = type
				// this.showModal = !this.showModal;
			},
			updateActivity(t) {
				this.$router.push({
					name: 'UserUpdateActivity',
					query: {
						ID: t.ID
					}
				});
			},
			detailActivity(t) {
				this.text1 = t;
				this.detailshowModal = !this.detailshowModal;
			},
			modifyList(text) {
				// text = Object.assign(text, {
				// 	time: new Date()
				// });
				this.showModal = !this.showModal;
				this.text1 = text;
			},
			enableList(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定要${text.IsEnable ? '停用' : '启用'}该学生组织吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await EnableClub(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			deleteList(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定删除该学生组织吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await DeleteClub(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			seeList(text, name) {
				let path = '';
				if (name == 'teacher') {
					path = 'ClubTeacher';
				} else if (name == 'manage') {
					path = 'ClubManagerList';
				} else {
					path = 'ClubMember';
				}
				this.$router.push({
					name: path,
					query: {
						ID: text.ID,
						activityTypeID: text.activityTypeID
					}
				});
			},
			seedetail(t) {
				this.text = t;
				this.detailshowModal = !this.detailshowModal;
			},
			AddFile(text) {
				this.$router.push({
					name: 'Enclosure',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						state: text.State,
					}
				});
			},
			UserActivitySign(text) {
				this.$router.push({
					name: 'UserActivitySign',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						State: text.State
					}
				});
			},
			UserActivityJob(text) {
				this.$router.push({
					name: 'UserActivityJob',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						source:1,
						State:text.State
					}
				});
			},

			UserPrizeList(text) {
				this.$router.push({
					name: 'UserActivityMemberPrize',
					query: {
						activityID: text.ID,
						TypeID: text.TypeID,
						LevelID:Text.LevelID
					}
				});
			},
			ActivityApplyList(text) {
				this.$router.push({
					name: 'UserActivityApplyList',
					query: {
						ID: text.ID,
						State:text.State
					}
				});
			},
			activitymembermanage(text) {
				this.$router.push({
					name: 'ActivityMembermanage',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						ClubID: text.ClubID,
						TypeItemID: text.TypeItemID,
						State:text.State
					}
				});
			},
			closeFun(index) {
				this.showModal = false;
				this.detailshowModal = false;
				this.updateshowModal = false;
				this.EndActivityApplyIf = false;
				if (index == 1) {
					this.getList();
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.home-form {
		margin: 20px;
		background: #f8fcff;
		padding: 20px;
		border-radius: 12px;

		.ant-col {
			width: 19%;
			margin-right: 1%;

			&.option {
				margin-top: 25px;

				.ant-btn {
					padding: 0 5px;
					height: 32px;
				}
			}

			/deep/.ant-form-item {
				margin-bottom: 10px !important;
			}

			/deep/.ant-form-item-label {
				height: 20px;
				line-height: 20px;
				font-weight: 400;
				color: #8798ad;
			}

			/deep/.ant-input {
				height: 32px;
				background: #ffffff;
				border: 1px solid #dddee4;
				border-radius: 0px;
			}

			/deep/.ant-select-selection {
				height: 32px;
				background: #ffffff;
				border: 1px solid #dddee4;
				border-radius: 0px;
			}
		}
	}

	.ant-tabs {
		margin: 0 20px;
	}

	.tipremark {
		color: #f00;
		padding: 10px;
	}

	/deep/.sousuo .ant-form-item {
		display: flex;
		align-items: center;
	}
</style>
